<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>
      </div>

      <!-- 内容 -->
      <div class="main" :style="{ width: w + 'px' }">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props" label="left">
              <el-form label-position="left" inline class="demo-table-expand" >
                <div >
                  <el-form-item label="商品 ID:">
                  <span>{{ props.row.id }}</span>
                  </el-form-item>

                <el-form-item label="商品名称:">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
               
                <el-form-item label="商品价格:">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                </div>
                <div>
                  <el-form-item label="商品分类:">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="商品图片:">
                  <img :src="props.row.imgUrl" alt="" width="80" height="80">
                </el-form-item>
                <el-form-item label="商品描述:">
                  <span>{{ props.row.goodsDesc }}</span>
                </el-form-item>

                </div>
                 
                
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name"> </el-table-column>
          <el-table-column label="所属分类" prop="category"> </el-table-column>
          <el-table-column label="商品价格" prop="price"> </el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <el-popover placement="top-start" title="" trigger="hover">
                <img
                  :src="scope.row.imgUrl"
                  alt=""
                  style="width: 150px; height: 150px"
                />
                <img
                  slot="reference"
                  :src="scope.row.imgUrl"
                  style="width: 50px; height: 50px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="goodsDesc"> </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" width=" 180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="
                  handleEdit(scope.$index, scope.row),
                    (dialogFormVisible = true)
                "
                >编辑</el-button
              >
              <el-dialog title="修改商品信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>

                  <el-form-item label="所属分类" :label-width="formLabelWidth">
                    <el-select
                      v-model="form.category"
                      placeholder="请选择商品分类"
                    >
                      <el-option
                        :label="item"
                        :value="item"
                        v-for="item in cateList"
                        :key="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="商品价格" :label-width="formLabelWidth">
                    <el-input-number
                      v-model="form.price"
                      @change="handleChange"
                      :min="1"
                      label="请输入价格"
                    ></el-input-number>
                  </el-form-item>

                  <el-form-item label="商品图片" :label-width="formLabelWidth">
                    <el-upload
                      class="avatar-uploader"
                      :action="action"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img
                        v-if="form.imgUrl"
                        :src="form.imgUrl"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>

                  <el-form-item label="商品描述" :label-width="formLabelWidth">
                    <el-input
                      type="textarea"
                      v-model="form.goodsDesc"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="submitForm"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>

              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 20, 50, 200]"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { goodsList } from "../../api/goods";
import { goodsDel } from "../../api/goods";
import { goodsEdit, goodsCategories } from "../../api/goods";
export default {
  data() {
    return {
      action:"http://127.0.0.1:5000/goods/goods_img_upload",
      w: document.body.clientWidth - 400,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      cateList: [],  //分类启用的数据
      tableData: [
        // {
        //   id: "",
        //   name: "",
        //   category: "",
        //   desc: "",
        //   price: "",
        //   imgurl: "",
        //   shopId: "",
        // },
      ],
      dialogFormVisible: false,
      form: {
        id: "",
        name: "",
        category: "",
        price: "",
        imgUrl: "",
        goodsDesc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getList();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    //删除商品
    async handleDelete(index, row) {
      console.log(index, row);

      let res = await goodsDel({
        params: {
          id: row.id,
        },
      });
      console.log(res);
      this.getList();
    },

    //编辑商品
    async handleEdit(index, row) {
      console.log(index, row);
      console.log(row.id);
      this.form.id = row.id;
      this.form=row

      this.getList();
    },

    //编辑商品
    async submitForm() {
      let res = await goodsEdit({
        id: this.form.id,
        name: this.form.name,
        category: this.form.category,
        price: this.form.price,
        imgUrl: this.form.imgUrl,
        goodsDesc: this.form.goodsDesc,
      });

      let{code,msg}=res
      if(code===0){
        this.$message({
              message: msg,
              type: "success",
            });
            this.dialogFormVisible = false;
            this.getList();
      }else{
        this.$message.error(msg);

      }

    },

    //获取列表
    async getList() {
      let res = await goodsList({
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          name: this.tableData.name,
          category: this.tableData.category,
        },
      });
      //console.log(res);
      console.log(res.total);
      this.total = res.total;
      this.tableData = res.data;
    },

    //获取启用的商品分类
    async startCate() {
      this.cateList = await goodsCategories();
    },

    //价格增减
    handleChange(value) {
      //console.log(value);
    },

  //图片上传
     handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      //将图片回填
      
      this.form.imgUrl = res.imgUrl;
    },
    //成功上传前
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 <= 10;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 0MB!");
      }
      return isJPG && isLt2M;
    },

    //屏幕自适应函数
    resizeHandel(){
      this.w=document.body.clientWidth-300
    }

  },

  created() {
    //得到当前窗口高度
    window.addEventListener("resize", this.resizeHandel);
    this.getList();
    this.startCate();
  },

  //销毁
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandel);
  },
};
</script>

<style lang="less" scoped>
.main {
  margin-bottom: 20px;

  .demo-table-expand{
    display: flex;
    justify-content: space-between;
    div{
      display: flex;
      flex-direction: column;
    }
    .el-form-item__content{
      line-height: 0;
    }
    .el-form-item{
      display: inline-block;
    }

  }

  // 图片上传样式
  .avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-icon-plus {
  border: 1px dashed #b1b0b0;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
}


</style>